<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="'设备详情 - ' + ${vehicle.name} + ' - 禾行通'">设备详情 - 禾行通</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <div class="row">
            <div class="col-md-12">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2><i class="fas fa-tractor"></i> 设备详情</h2>
                    <a href="/vehicles" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> 返回列表
                    </a>
                </div>
                
                <!-- 设备基本信息 -->
                <div class="row mb-4">
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">基本信息</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <p><strong>设备名称：</strong> <span th:text="${vehicle.name}"></span></p>
                                        <p><strong>设备类型：</strong> <span th:text="${vehicle.type}"></span></p>
                                        <p><strong>序列号：</strong> <span th:text="${vehicle.serialNumber}"></span></p>
                                        <p><strong>制造商：</strong> <span th:text="${vehicle.manufacturer}"></span></p>
                                    </div>
                                    <div class="col-md-6">
                                        <p><strong>购买日期：</strong> 
                                            <span th:text="${vehicle.purchaseDate != null ? #temporals.format(vehicle.purchaseDate, 'yyyy-MM-dd') : 'N/A'}"></span>
                                        </p>
                                        <p><strong>固件版本：</strong> <span th:text="${vehicle.firmwareVersion}"></span></p>
                                        <p><strong>最后更新：</strong> 
                                            <span th:text="${vehicle.lastUpdateTime != null ? #temporals.format(vehicle.lastUpdateTime, 'yyyy-MM-dd HH:mm:ss') : 'N/A'}"></span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 实时状态 -->
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">实时状态</h5>
                            </div>
                            <div class="card-body text-center">
                                <div class="mb-3">
                                    <span th:class="'badge fs-6 ' + 
                                          (${vehicle.status.name()} == 'WORKING' ? 'bg-success' : 
                                           ${vehicle.status.name()} == 'IDLE' ? 'bg-primary' : 
                                           ${vehicle.status.name()} == 'MAINTENANCE' ? 'bg-warning' : 
                                           ${vehicle.status.name()} == 'CHARGING' ? 'bg-info' : 'bg-danger')"
                                          th:text="${vehicle.status.description}"></span>
                                </div>
                                <div class="mb-3">
                                    <i class="fas fa-battery-three-quarters fa-2x text-success"></i>
                                    <div th:text="'电量: ' + ${vehicle.batteryLevel != null ? vehicle.batteryLevel + '%' : 'N/A'}"></div>
                                </div>
                                <div>
                                    <i class="fas fa-map-marker-alt fa-2x text-primary"></i>
                                    <div th:if="${vehicle.latitude != null and vehicle.longitude != null}">
                                        <small th:text="'纬度: ' + ${#numbers.formatDecimal(vehicle.latitude, 1, 6)}"></small><br>
                                        <small th:text="'经度: ' + ${#numbers.formatDecimal(vehicle.longitude, 1, 6)}"></small>
                                    </div>
                                    <div th:unless="${vehicle.latitude != null and vehicle.longitude != null}">
                                        <small class="text-muted">位置未知</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="row mb-4">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">设备操作</h5>
                            </div>
                            <div class="card-body">
                                <div class="btn-group me-2" role="group">
                                    <a th:href="@{/vehicles/edit/{id}(id=${vehicle.id})}" class="btn btn-primary">
                                        <i class="fas fa-edit"></i> 编辑设备
                                    </a>
                                    <a th:href="@{/vehicles/{id}/control(id=${vehicle.id})}" class="btn btn-success">
                                        <i class="fas fa-gamepad"></i> 远程控制
                                    </a>
                                    <a th:href="@{/vehicles/{id}/maintenance(id=${vehicle.id})}" class="btn btn-warning">
                                        <i class="fas fa-wrench"></i> 维护管理
                                    </a>
                                </div>
                                <button class="btn btn-info" onclick="refreshStatus()">
                                    <i class="fas fa-sync-alt"></i> 刷新状态
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 维护记录 -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">维护记录</h5>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>维护类型</th>
                                                <th>描述</th>
                                                <th>计划日期</th>
                                                <th>完成日期</th>
                                                <th>技术员</th>
                                                <th>费用</th>
                                                <th>状态</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr th:each="record : ${maintenanceRecords}">
                                                <td th:text="${record.type.description}"></td>
                                                <td th:text="${record.description}"></td>
                                                <td th:text="${record.scheduledDate != null ? #temporals.format(record.scheduledDate, 'yyyy-MM-dd') : 'N/A'}"></td>
                                                <td th:text="${record.completedDate != null ? #temporals.format(record.completedDate, 'yyyy-MM-dd') : 'N/A'}"></td>
                                                <td th:text="${record.technician}"></td>
                                                <td th:text="${record.cost != null ? '¥' + record.cost : 'N/A'}"></td>
                                                <td>
                                                    <span th:class="'badge ' + 
                                                          (${record.status.name()} == 'COMPLETED' ? 'bg-success' : 
                                                           ${record.status.name()} == 'IN_PROGRESS' ? 'bg-warning' : 
                                                           ${record.status.name()} == 'SCHEDULED' ? 'bg-primary' : 'bg-secondary')"
                                                          th:text="${record.status.description}"></span>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div th:if="${#lists.isEmpty(maintenanceRecords)}" class="text-center text-muted py-4">
                                    <i class="fas fa-info-circle"></i> 暂无维护记录
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function refreshStatus() {
            // 通过AJAX刷新设备状态
            fetch(`/api/vehicles/${/*[[${vehicle.id}]]*/ 0}/status`)
                .then(response => response.json())
                .then(data => {
                    // 更新页面状态显示
                    location.reload();
                })
                .catch(error => {
                    console.error('Error refreshing status:', error);
                });
        }
        
        // 每30秒自动刷新状态
        setInterval(refreshStatus, 30000);
    </script>
</body>
</html>